<style>
    .fixed-table-toolbar{
        margin-bottom: 10px;
    }
    #toolbar{
        display: flex;
    }
    #toolbar #c-calendar,#toolbar .store{
        margin-left: 10px;
    }
    .thumbnail.house{
        position: relative;
        padding: 0;
    }
    .thumbnail .caption{
        padding: 1px 9px 9px;
    }
    .thumbnail.house img{
        width: 100%;
        height: 150px;
    }
    .thumbnail.house .caption h4{
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis; 
        display: -webkit-box; 
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        height: 34px;
    }
    .thumbnail.house .caption .text-muted{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
    }
    .thumbnail.house .house-id{
        position: absolute;
        left: 15px;
        top: 15px;
    }
    .thumbnail.house .btn-info{
        margin-bottom: 5px;
    }
    .thumbnail.house .caption .store{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .thumbnail.house .caption .tags{
        height: 50px;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis; 
        display: -webkit-box; 
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        margin-bottom: 5px;
    }
    .price{
        color: #fa3534;
    }
    .market_price{
        text-decoration: line-through;
    }
</style>
<div class="panel panel-default panel-intro">
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
                        <input id="c-calendar" data-rule="required" class="form-control datetimerange" autocomplete="off" data-date-format="YYYY-MM-DD" data-use-current="true" name="calendar" type="text" placeholder="请选择日期" value="{:date('Y-m-d')}" style="width:170px;">
                        <div class="store">
                            <input id="c-store_id" data-rule="required" data-source="booking/store/index" class="form-control selectpage" placeholder="请选择门店" name="row[store_id]" type="text" value="">
                        </div>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('booking/house/edit')}"
                           data-operate-del="{:$auth->check('booking/house/del')}"
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

<script id="itemtpl" type="text/html">
    <div class="col-sm-4 col-md-3">      
        <div class="thumbnail house">           
            <div class="house-id">
                <span class="btn btn-info"><%= item.id %></span>               
            </div>
            <img src="<%=item.image_text%>" alt="<%=item.title%>">
            <div class="caption">
                <h4><%=item.name%></h4>
                <div class="tags">
                    <% for(var i=0,len=item.tag_names.length; i<len; i++){ %>                  
                     <span class="btn btn-info btn-xs"><%= item.tag_names[i] %></span>
                    <% } %>
                </div>
                <div class="text-muted store"><%=(item.store && item.store.name) || '门店不存在'%></div>
                <div class="text-muted">
                    <span class="price">价格：￥<%=item.price%></span>
                    <a href="booking/calendar/index/house_id/<%=item.id%>" class="btn btn-xs btn-primary btn-dialog{:$auth->check('booking/calendar/index')?'':'hide'}" data-window="parent" data-area='["80%","80%"]' title="{:__('日历价格')}" ><i class="fa fa-eye"></i> {:__('日历价格')}</a>
                </div>
                <div class="text-muted">
                    <span>可住人数：<%=item.livenums%>人</span>
                    <span>面积：<%=item.area%>㎡</span>
                </div>
                <div class="text-muted">                   
                    <div>
                        状态：<span class='text-success'><i class='fa fa-circle'></i> 有房</span>
                    </div>
                    <a href="javascript:;" class="btn btn-xs btn-success add-order {:$auth->check('booking/order/add')?'':'hide'}" data-house_id="<%= item.id %>" title="{:__('房间预订')}" ><i class="fa fa-buysellads"></i> {:__('房间预订')}</a>
                </div>
            </div>
        </div>
    </div>
</script>
